<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<style>
    body{
        background-image: url("http://tp5.com/static/uploads/20190522/1.png");}
    .layui-nav .layui-nav-child dd:hover ul{
        display: block;
        position: absolute;
        top: 0;
        left: 68px;
        background-color: #dddddd;
        box-shadow: 0 2px 4px rgba(0,0,0,.12);
        border: 1px solid #d2d2d2;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    .layui-nav .layui-nav-child dd ul{display: none}
    .layui-nav .layui-nav-child dd ul a{background:#f0f0f0;}
</style>
<body class="layui-layout-body">
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>水平导航菜单</legend>
</fieldset>-->

<ul class="layui-nav layui-bg-blue">
    <!--<li class="layui-nav-item"><img src="/static/images/face/timg.gif" alt="" width="95" height="60"></li>-->
    {foreach name='data' item='v'}
    <li class="layui-nav-item"><a href="javascript:;">{$v.name}</a>
        {if $v.childs != null}
        <dl class="layui-nav-child">
            {foreach name='$v.childs' item='vo'}
            <dd>
                <a href="javascript:;">{$vo.name}</a>
                {if !empty($vo.childs)}
                <ul>
                    {foreach name='$vo.childs' item='voo'}
                    <li>
                        <a href="javascript:;">{$voo.name}</a>
                    </li>
                    {/foreach}
                </ul>
                {/if}
            </dd>
            {/foreach}
        </dl>
        {/if}
    </li>
    {/foreach}
</ul>

<div class="layui-carousel" id="test10" style="margin:0 auto">
    <p style="color:#009688;font-size:25px;text-align:center;">图片轮播展示</p>
    <div carousel-item="">
        {volist name="row" id="vo"}
        <img src="{$vo.path_name}" alt="">
        {/volist}
    </div>
    <br>
</div>

<script src="/static/layui/layui.js"></script>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','carousel','layer'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var carousel = layui.carousel;
        var layer = layui.layer;

        //向世界问个好
        layer.msg('Hello yuexiaolei');

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });

        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '600px'
            ,height: '440px'
            ,interval: 1000
        });

    });
</script>
</body>
</html>